<template>
  <a-modal
    title="权限配置"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="720px"
    style="overflow: hidden;"
    :bodyStyle="{ maxHeight: '520px', overflow: 'auto' }"
  >
    <a-spin :spinning="spinning">
      <a-row>
        <tree v-model="checkedKeys" :items="treeData"></tree>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveRoleMenu, getRoleMenu } from '@/api/sys/role'
import tree from './tree'
export default {
  components: { tree },
  name: 'Auth',
  data () {
    return {
      visible: false,
      spinning: false,
      confirmLoading: false,
      defaultExpandAll: true,
      checked: [],
      roleId: null,
      treeData: [], // 树形数据
      checkedKeys: [] // 选中项
    }
  },
  computed: {},
  methods: {
    showModal (id) {
      this.visible = true
      this.spinning = true
      this.roleId = id
      getRoleMenu({ id: id }).then(res => {
        if (res.code === 1) {
          const data = res.data || []
          this.treeData = data.menus
          this.checkedKeys = data.checkedKeys
          this.spinning = false
        }
      })
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.confirmLoading = true
      saveRoleMenu({
        roleId: this.roleId,
        menuIds: this.checkedKeys
      }).then(res => {
        this.confirmLoading = false
        if (res.code === 1) {
          this.$message.success('保存成功！')
          this.hideModal()
        }
      })
    }
  }
}
</script>

<style scoped></style>
